<template>
	<el-card shadow="hover">
		<template v-slot:header>
			督查督办
			<span style="margin-left: 10px;font-size: 14px;font-weight: 200;cursor: pointer" @click="getProcess" :class="tabFlag=='1'?'avt':''">任务</span>
			<span style="margin-left: 10px;font-size: 14px;font-weight: 200;cursor: pointer" @click="getManage" :class="tabFlag=='2'?'avt':''">督办</span>
			<div style="float: right;display: inline-flex;color: #FFFFFF;">
				<sc-icon style="cursor: pointer;width: 18px; margin-right: 10px;" @click="reLoadData" title="刷新"><el-icon-refresh-right/></sc-icon>
				<sc-icon style="cursor: pointer;width: 18px;" @click="getMoreData" title="全部"><el-icon-more-filled/></sc-icon>
			</div>
		</template>
		<div style="height: 210px;text-align: center;">
			<el-table :data="tableDataList" style="width: 100%;cursor: pointer;" :show-header="false" @row-click="showRecord" class="customer-table">
				<el-table-column prop="typeName" :show-overflow-tooltip="true">
					<template #default="scope">
						《{{scope.row.typeName}}》
					</template>
				</el-table-column>
				<el-table-column prop="title" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="beginTIme" width="100" align="center"></el-table-column>
				<el-table-column prop="endTime" width="100" align="center"></el-table-column>
				<el-table-column prop="" width="100" align="center">
					<template #default="scope">
						{{tabFlag=='1'?scope.row.leadUserName:scope.row.handedUserName}}
					</template>
				</el-table-column>
			</el-table>
		</div>
	</el-card>
	<recordDetails v-if="dialog.detailsSave" ref="detailsDialog" @closed="dialog.detailsSave=false"></recordDetails>
	<supervisionDetails v-if="dialog.supervisionSave" ref="supervisionDialog" @closed="dialog.supervisionSave=false"></supervisionDetails>
</template>

<script>
import recordDetails from '@/views/supervision/task/mytask/details'
import supervisionDetails from '@/views/supervision/enter/details'
export default {
	components: {
		recordDetails,
		supervisionDetails
	},
	data() {
		return {
			dialog: {
				detailsSave:false,
				supervisionSave:false,
			},
			tabFlag:"1",
			tableDataList:[],
			timer:null
		}
	},
	created() {
		clearInterval(this.timer)
		this.timer = null
	},
	beforeUnmount() {
		clearInterval(this.timer);
		this.timer = null
	},
	mounted() {
		this.reLoadData();
		this.setTimer();
	},
	methods: {
		reLoadData(){
			if(this.tabFlag=="1")
			{
				this.getProcess();
			}else if(this.tabFlag=='2')
			{
				this.getManage();
			}

		},
		getMoreData(){
			if(this.tabFlag=="1")
			{
				this.$nextTick(() => {
					this.$router.replace({
						path: '/supervision/task/mytask',
					})
				})
			}else if(this.tabFlag=='2')
			{
				this.$nextTick(() => {
					this.$router.replace({
						path: '/supervision/handle/leadmange',
					})
				})
			}
		},
		async getProcess(){
			this.tabFlag = "1";
			var res = await this.$API.supervision.desk.getSupervisionProcessListForDesk.get();
			if (res.code == 200) {
				this.tableDataList = res.data
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getManage(){
			this.tabFlag = "2";
			var res = await this.$API.supervision.desk.getManageSupervisionListForDesk.get();
			if (res.code == 200) {
				this.tableDataList = res.data
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		showRecord(row, event, column) {
			if(this.tabFlag=="1")
			{
				this.dialog.detailsSave = true
				this.$nextTick(() => {
					this.$refs.detailsDialog.open().setData(row)
				})
			}else if(this.tabFlag=="2")
			{
				this.dialog.supervisionSave = true
				this.$nextTick(() => {
					this.$refs.supervisionDialog.open().setData(row)
				})
			}
		},
		setTimer() {
			if(this.timer == null) {
				this.timer = setInterval( () => {
					this.reLoadData();
				}, this.$TOOL.data.get("MSG_TIME"))
			}
		},
		//本地更新数据
		handleSaveSuccess() {
			this.getMyTaskListForDesk();
		}
	}
}
</script>
<style scoped>
:deep(.el-card__header){
	background: rgba(64, 158, 255, 0.6);
	color: white;
	padding: 10px 20px 10px 20px;
}
.avt {
	border-bottom:2px solid red;
}
:deep(.el-table tr){
	cursor: pointer;
}
.customer-table th {
	border: none;
}
.customer-table td, .customer-table th.is-leaf {
	border: none;
}

.el-table--border, .el-table--group {
	border: none;
}

.customer-table thead tr th.is-leaf {
	border: 1px solid #EBEEF5;
	border-right: none;
}

.customer-table thead tr th:nth-last-of-type(2) {
	border-right: 1px solid #EBEEF5;
}

.el-table--border::after, .el-table--group::after {
	width: 0;
}

.customer-table::before {
	width: 0;
}

.customer-table .el-table__fixed-right::before, .el-table__fixed::before {
	width: 0;
}

.el-table--border th.gutter:last-of-type {
	border: 1px solid #EBEEF5;
	border-left: none;
}
</style>
